<template>
  <div
    :class="{
      'web-container': deviceType == 'web',
      'mobile-container': deviceType == 'mobile',
      'ipad-container': deviceType == 'ipad',
    }"
  >
    <div class="indexBanner">
      <el-image
        style="width: 100%; height: 100%"
        :src="bannerUrl"
        fit="cover"
      ></el-image>
    </div>

    <!-- 版心 -->
    <div class="pageArea">
      <!-- 每个模块使用section 当作class名 -->
      <!-- 关于我们 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">關於我們</div>
          <div class="more">查看全部 ></div>
        </div>
        <div class="section_content">
          <div class="card" v-if="deviceType == 'web' || deviceType == 'ipad'">
            <div
              class="cardItem"
              v-for="(cardItem, cardIndex) in aboutList"
              :key="cardIndex"
            >
              <div class="pageH2">
                {{ cardItem.title }}
              </div>
              <div class="cardArrow">
                <i class="el-icon-right"></i>
              </div>
              <div class="cardImage">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="cardItem.aboutUrl"
                  fit="contain"
                ></el-image>
              </div>
            </div>
          </div>

          <!--关于我们 轮播 -->
          <div class="swiper-container" v-if="deviceType == 'mobile'">
            <swiper :options="swiperoptionAbout" ref="mySwiper">
              <swiper-slide
                v-for="(cardItem, cardIndex) in aboutList"
                :key="cardIndex"
              >
                <div class="cardItem">
                  <div class="pageH2">
                    {{ cardItem.title }}
                  </div>
                  <div class="cardArrow">
                    <i class="el-icon-right"></i>
                  </div>
                  <div class="cardImage">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="cardItem.aboutUrl"
                      fit="contain"
                    ></el-image>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>

      <!-- 祭祖服务与产品 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">祭祖服務與產品</div>
        </div>
        <div class="section_content">
          <div class="serviceBanner">
            <el-image
              style="width: 100%; height: 100%"
              :src="serivesUrl"
              fit="fill"
            >
            </el-image>
            <div class="whiteButton">查看更多</div>
          </div>
        </div>
      </div>

      <!-- 实时新讯 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">實時新訊</div>
        </div>
        <div class="section_content">
          <div class="news" v-if="deviceType == 'web' || deviceType == 'ipad'">
            <div
              class="newsItem"
              :style="{ backgroundImage: 'url(' + newsItem.newsUrl + ')' }"
              v-for="(newsItem, newsIndex) in newsList"
              :key="newsIndex"
            >
              <div class="cardTitle">{{ newsItem.title }}</div>
              <div class="box">
                <div class="newsArrow">
                  <i class="el-icon-right"></i>
                </div>
              </div>
            </div>
          </div>

          <!--实时新讯 轮播 -->
          <div class="swiper-container-news" v-if="deviceType == 'mobile'">
            <swiper :options="swiperoptionNews" ref="mySwiper">
              <swiper-slide
                v-for="(newsItem, newsIndex) in newsList"
                :key="newsIndex"
              >
                <div class="newsItem">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="newsItem.newsUrl"
                    fit="fill"
                  >
                  </el-image>
                  <div class="mesg">
                    <div class="cardTitle">{{ newsItem.title }}</div>
                    <div class="box">
                      <div class="newsArrow">
                        <i class="el-icon-right"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>

      <!-- 百家论坛 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">百家論壇</div>
          <div class="more" v-if="deviceType == 'web' || deviceType == 'ipad'">
            查看全部 >
          </div>
        </div>

        <!-- 轮播区域 -->
        <div class="section_content">
          <div
            class="swiper-container"
            v-if="deviceType == 'web' || deviceType == 'ipad'"
          >
            <swiper :options="swiperoption" ref="mySwiper">
              <swiper-slide
                v-for="(forumItem, forumIndex) in swiperList"
                :key="forumIndex"
              >
                <div
                  class="leftBox"
                  :style="{
                    backgroundImage: 'url(' + forumItem.forumUrl + ')',
                  }"
                >
                  <div class="leftBoxMessage">
                    <div class="boxTitle">{{ forumItem.title }}</div>
                    <div class="rightArrow">
                      <i class="el-icon-right"></i>
                    </div>
                  </div>
                </div>
                <div class="rightBox">
                  <div
                    class="forumBox"
                    v-for="(
                      secForumItem, secForumIndex
                    ) in forumItem.rightMsgList"
                    :key="secForumIndex"
                  >
                    <div
                      class="topImg"
                      :style="{
                        backgroundImage: 'url(' + secForumItem.forumUrl + ')',
                      }"
                    ></div>
                    <div class="bottomMsg">
                      <div class="pageH3">{{ secForumItem.title }}</div>
                      <div class="pageH5">{{ secForumItem.data }}</div>
                      <div class="pageH4">{{ secForumItem.content }}</div>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
            <div class="nextPrev">
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </div>
          </div>

          <!-- 移动端百家论坛 -->
          <div class="mobileForum" v-if="deviceType == 'mobile'">
            <div class="mobileContent">
              <div
                class="contentItem"
                v-for="(contentItem, contentIndex) in swiperList"
                :key="contentIndex"
              >
                <div class="leftUrl">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="contentItem.forumUrl"
                    fit="fill"
                  ></el-image>
                </div>
                <div class="rightMsg">
                  <div class="pageH3">{{ contentItem.title }}</div>
                  <div class="pageH4">{{ contentItem.content }}</div>
                  <div class="pageH5">{{ contentItem.data }}</div>
                </div>
              </div>

              <div class="more">查看更多 ></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 百家姓风采 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">百家姓風采</div>
        </div>
        <div class="section_content">
          <div class="serviceBanner">
            <el-image
              style="width: 100%; height: 100%"
              :src="familyUrl"
              fit="fill"
            >
            </el-image>
          </div>
          <div class="section_text">
            <div class="pageH3">{{ familyText }}</div>
          </div>
          <div class="redButton">立即尋根</div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  name: "Index",
  data() {
    return {
      bannerUrl: require("@/assets/images/index/banner.png"), //banner
      serivesUrl: require("@/assets/images/index/serives.png"), //产品与服务
      familyUrl: require("@/assets/images/index/family_01.png"), //百家姓风采
      familyText:
        "參天之木，必有其根；懷山之水，必有其源；人之有祖，亦猶是焉。 追本溯源、尋根問祖，是人的一種本性、情節和真情，更是中華民族的傳統美德。中華姓氏，源於上古，傳續至今，在漫長的歷史進程中，愈來愈烈，他蘊含著諸多深層次的文化價值和意義。一個人無論飄泊多遠，都不能忘了自己的家鄉，那裡有曾經養育自己的親人，那裡埋葬著自己的祖先。安世代anshidai將架起一座連接傳統與現代，祖先與後世的橋樑，為全球華人提供尋根、問祖、祭祖系列服務，滿足大家對於傳統文化的渴望和對祖先的敬仰！",
      // 关于我们
      aboutList: [
        {
          title: "安世代起源",
          aboutUrl: require("@/assets/images/index/about_01.png"),
        },
        {
          title: "安世代回憶錄",
          aboutUrl: require("@/assets/images/index/about_02.png"),
        },
        {
          title: "理念和展望",
          aboutUrl: require("@/assets/images/index/about_03.png"),
        },
      ],

      // 关于我们轮播
      swiperoptionAbout: {
        slidesPerView: 2.5,
        spaceBetween: 16,
        mousewheelControl: true,
      },

      // 实时新讯
      newsList: [
        {
          title: "祖先牌位",
          newsUrl: require("@/assets/images/index/news_01.png"),
        },
        {
          title: "祖先祭祀",
          newsUrl: require("@/assets/images/index/news_02.png"),
        },
        {
          title: "活動總覽",
          newsUrl: require("@/assets/images/index/news_03.png"),
        },
      ],

      // 实时新讯轮播
      swiperoptionNews: {
        slidesPerView: 2.5,
        spaceBetween: 16,
        mousewheelControl: true,
      },

      // 百家论坛轮播
      swiperoption: {
        loop: false, //是否循环轮播
        autoplay: false, // 是否可以自动轮播
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        mousewheelControl: true,
      },
      swiperList: [
        {
          forumUrl: require("@/assets/images/index/forum_01.png"),
          title: "清明—讓我們緬懷先祖吧",
          data: "2024.05.23",
          content:
            "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
          rightMsgList: [
            {
              forumUrl: require("@/assets/images/index/forum_02.png"),
              title: "清明—讓我們緬懷先祖吧",
              data: "2024.05.23",
              content:
                "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
            },
            {
              forumUrl: require("@/assets/images/index/forum_02.png"),
              title: "清明—讓我們緬懷先祖吧",
              data: "2024.05.23",
              content:
                "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
            },
          ],
        },
        {
          forumUrl: require("@/assets/images/index/forum_01.png"),
          title: "清明—讓我們緬懷先祖吧1",
          data: "2024.05.23",
          content:
            "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
          rightMsgList: [
            {
              forumUrl: require("@/assets/images/index/forum_02.png"),
              title: "清明—讓我們緬懷先祖吧1",
              data: "2024.05.23",
              content:
                "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
            },
            {
              forumUrl: require("@/assets/images/index/forum_02.png"),
              title: "清明—讓我們緬懷先祖吧1",
              data: "2024.05.23",
              content:
                "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
            },
          ],
        },
        {
          forumUrl: require("@/assets/images/index/forum_01.png"),
          title: "清明—讓我們緬懷先祖吧2",
          data: "2024.05.23",
          content:
            "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
          rightMsgList: [
            {
              forumUrl: require("@/assets/images/index/forum_02.png"),
              title: "清明—讓我們緬懷先祖吧2",
              data: "2024.05.23",
              content:
                "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
            },
            {
              forumUrl: require("@/assets/images/index/forum_02.png"),
              title: "清明—讓我們緬懷先祖吧2",
              data: "2024.05.23",
              content:
                "我們在廟宇中建立祀奉祖先的宗祠 提供祖先牌位空間及祭祖服展示兩行文本…",
            },
          ],
        },
      ],
    };
  },
  methods: {},
};
</script>
  
<style lang="scss" scoped>
@import "~@/assets/viewCss/index/index.scss";
</style>